<template>
    <div class="mpage mine">
        <My-head :back="false" title="个人中心"></My-head>

        <div class="mine-top ">
            <!-- 头部背景图 -->
            <img :src="require('@/assets/Pikaqiu.jpg')" class="avator-icon" alt="">
            <!-- 用户名登录显示 -->
            <div class="nick-name">
                <span v-if="userInfo"> {{ userInfo.username }} - {{ userInfo.phone }} </span>
                <span v-else @click="gotopage('login')">立即登录</span>
            </div>
        </div>

        <ul class="my-order-tab">
            <!-- 电影订单 -->
            <li>
                <img src="" alt="">
                <p>电影订单</p>
            </li>
            <!-- 商品订单 -->
            <li>
                <img src="" alt="">
                <p>商品订单</p>
            </li>
      </ul>

      <div class="infolist">
        <van-cell-group>
           <template v-if="userInfo">
                <van-cell title="我的关注" value="5" icon="fire-o" is-link  />
                <van-cell title="我的点赞" value="2" icon="like-o" is-link  />
                <van-cell title="我的收藏" value="1" icon="star-o" is-link  />
                <van-cell title="个人信息"  icon="friends-o" is-link  />
                <van-cell title="余额" value="200" icon="gem-o" is-link  />
                <van-cell title="历史记录"  icon="clock-o" is-link  />
                <van-cell title="修改密码" :to="{name:'changepassword'}"  icon="smile-o" is-link  />
           </template>
           
          <van-cell title="设置"  icon="setting-o" is-link  />
          <van-cell title="清除缓存" @click='clearcache' value="" icon="setting-o" is-link> {{ cache }} M</van-cell>
        </van-cell-group>

        <van-button class="logout" v-if="userInfo"  @click='logoutAction' block>退出登录</van-button>
      </div>

      <van-overlay :show="show">
          <div class="mask">
              <van-circle v-if="show" v-model="currentRate" :rate="100" :speed="20" :text="text" />
          </div>
      </van-overlay>

    </div>
</template>

<script>
export default {
    data() {
        return {
            cache: 657.3,
            show: false,
            currentRate: 0,
        }
    },
    computed: {
        text() {
            return this.currentRate + " %"
        }
    },
    watch: {
        currentRate(v) {
            if(v == 100) {
                 this.$toast("缓存清除成功")
                 this.cache = '0'
                 this.show = false
            }
        }
    },
    methods: {
        logoutAction() {
            this.$dialog.confirm({
                title: '温馨提示提示',
                message: '亲,您确定要退出登录吗?',
            })
            .then(() => {
                // on confirm
                this.changeUserInfo(null);
            })
            .catch(() => {
                // on cancel
            })
        },

        clearcache() {
            if(this.cache > 0) {
                this.$dialog.confirm({
                    title: '温馨提示提示',
                    message: '亲,您确定要清除缓存吗?',
                })
                .then(() => {
                    this.show = true
                })
                .catch(err => {

                })
            } else {
                this.$toast("缓存已为空哦!")
            }
        }
    }
}
</script>

<style lang="scss">

.mine {
  background: #f4f4f4;
  height:100%;
  overflow: auto;
  &-top {
    width: 100%;
    height: 200px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png) 0 0 no-repeat;
    text-align: center;
    margin-top: -44px;
    height: 200px;
    padding-left: 22px;
    padding-top: 64px;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    .avator-icon {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
    }
    .nick-name {
      font-size: 18px;
    }
  }

    .my-order-tab {
        width: 100%;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        font-size: 13px;
        color: #797d82;
        padding: 0;
        height: 79px;
        background: #fff;
        margin-bottom: 10px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        li {
            position: relative;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            list-style: none;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img {
                width:26px;
                height:26px;
            }
        }
    }

    .infolist {
        padding-bottom:20px;
        .logout {
            width:90%;
            margin:20px auto;
        }
    }
}

.van-overlay {
    z-index:1559;
    .mask {
        width:100%;
        height:100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
  }
}

// 清除缓存百分比颜色
.van-circle__text {
    color: white;
}

</style>